<template>
	<u-navbar :border-bottom="false" :is-back="false" title="活动列表" :background="{}">
		<view class="slot-wrap f1">
			<view class="text flex flex-jc-c flex-ai-c">
				<!-- 活动列表 -->
			</view>
		</view>
	</u-navbar>
	<view class="plr-24 mb_30">
		<activeList :list="inits.activity" />
		<u-loadmore margin-top="20" bg-color="none" :status="inits.loadStatus" @loadmore="loadmore"
			v-if="inits.activity.length"></u-loadmore>
	</view>
	<view style="height: 148rpx;"></view>
	<tabbar :current="1" />
</template>

<script lang="ts" setup>
	import activeList from '@/components/activeList.vue'
	import { reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import actice from '../../api/active.js'
	import getLocation from '../../utils/location.js';
	const inits = reactive({
		activity: [],
		city: '',
		loadStatus: '',
		page: 1
	})
	const location = (isModal = false) => {
		getLocation(isModal).then((res) => {
			inits.city = res.city
			getActiviteList()
		}).catch((err) => {
			inits.city = err.city
			getActiviteList()
		})
	}
	const loadmore = () => {
		if (inits.loadStatus == 'nomore') return
		getActiviteList()
	}
	const moreStatus = (status : string) => {
		inits.loadStatus = status
	}
	const getActiviteList = async () => {
		const res = await actice.getActiviteList({
			type: 3,
			city: inits.city,
			page: inits.page,
			size: 10
		})
		if(res.code !== 200) return
		inits.activity = [...inits.activity, ...res.data]
		if (res.data.length < 10) return moreStatus('nomore')
		if (res.data.total <= 10) {
			moreStatus('nomore')
		} else {
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		inits.page += 1 // 当前页加1
	}
	onLoad(() => {
		location()
	})
</script>

<style>
	page{
		background: #F7F7F7;
	}
</style>